
import React, { useEffect, useState } from 'react'
import { ajax } from '../../api'
import {Row,Col,Form,Input,Button,Typography,Tag,   Select , Card } from "antd" 
import { LeftOutlined } from '@ant-design/icons';
import { baseURL } from '../../api/request';
import { annoTypeList } from '../../utils/commom';
import moment from '_moment@2.29.1@moment';
const { Meta } = Card;
const {Title} = Typography
export default function AnnoDetail({history,location}:any) {
    const [data, setdata] = useState<any>(null)
    useEffect(()=>{
        getData()
    },[])

    const getData = async ()=>{
       let {code,result} = await ajax.getannoitem({
           _id:new URLSearchParams(location.search).get('aid')
       })
       if(code==200){
           setdata(result)
       }
    }

    return (
        <div>
            <Title onClick={()=>history.go(-1)} level={4} style={{cursor:'pointer'}}>
            <LeftOutlined/> 公告详情
            </Title>
            <Col>
            <Card
            hoverable
            style={{width:240}}
            cover={<img alt="example" src={data?.desc.replace(/public/,baseURL)} />}
            >
             <Meta title={data?.title} description={data?.content}/>
             <Tag style={{margin:'10px 0'}} color={ annoTypeList.find((item:any)=>item.value==data?.type)?.color}> 
                                {annoTypeList.find((item:any)=>item.value==data?.type)?.text}
                            </Tag>
                            <p>
                                {data?.userInfo?.username}
                            </p>
                            <p>
                                {moment(data?.time).format("YYYY-MM-DD HH:mm:SS")}
                            </p>
            
            </Card>
            </Col>
        </div>
    )
}
